<template>

	<view class="vips">
		<view class="navs" :style="{'padding-top':(statusBarTop)+'px'}">
			<uni-icons type="arrowleft" size="24" color="#545454" @click="goBack"></uni-icons>
			<text>我的会员</text>
		</view>
		<view class="content">
			<vipinfo :userinfo="userinfo" @openCoup="openCoup" :type="'show'"></vipinfo>

			<vipprofit></vipprofit>

			<button type="default" class="open_btn" v-if="userinfo.user_level_id&&userinfo.user_level_id == '0'"
				@click="openCoup">立即开通</button>
			<button type="default" class="open_btn" v-else @click="openCoup">续费会员88元/年</button>

			<view class="titles">
				会员等级
			</view>

			<view class="goopen" v-if="userinfo.user_level_id && userinfo.user_level_id == '0'" @click="openCoup">
				<view class="goopen_left">
					<view class="gold">
						<image class="vip_icon" :src="IMGLink+'/my/vip_icon.png'" mode="widthFix"></image>
					</view>
					<text>开通VIP享受超多福利</text>
				</view>
				<button type="default" size="mini" class="dredge_btn">马上开通</button>
			</view>

			<view class="goopen" v-if="userinfo.user_level_id && userinfo.user_level_id == '1'"
				@click="goPage('/pagesA/my/vips/vipmore')">
				<view class="goopen_left">
					<view class="gold">
						<image class="vip_icon" :src="IMGLink+'/my/vip_icon.png'" mode="widthFix"></image>
					</view>
					<text>已享受VIP福利</text>
				</view>
				<button type="default" size="mini" class="dredge_btn">查看更多</button>
			</view>
		</view>

		<uni-popup ref="paychoose" type="top" class="pay_pop" :mask-click="true">
			<paytype :payprice="payprice" @closeDiscountPop='closeDiscountPop' @goOpen="goOpen">
			</paytype>
		</uni-popup>

		<pwdmodal ref="showModal" :payprice="payprice" @isPassword="isPassword"></pwdmodal>

		<uni-popup ref="setpwdPop" type="bottom" :mask-click="true">
			<view class="setpwd_pop">
				<view class="pwd_info">
					请先设置支付密码
				</view>
				<view class="pwd_btns">
					<button type="default" class="opt_btn cancle_btn" @click="closeSetpwdPop">取消</button>
					<button type="default" class="opt_btn set_btn" @click="goSetPwd">设置密码</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import paytype from "../../components/payType.vue";
	import pwdmodal from "../../components/pwdModal.vue";
	import vipprofit from "../../components/vipProfit.vue";
	import vipinfo from "../../components/vipInfo.vue";
	import {
		vips
	} from "@/api/my/my.js";
	import copyFunc from "@/utils/userCommon.js";
	export default {
		components: {
			paytype,
			pwdmodal,
			vipprofit,
			vipinfo
		},
		data() {
			return {
				IMGLink: this.IMGLink,
				statusBarHeight: 0,
				statusBarTop: 0,
				payprice: "",
				password: "",
				showModal: false,
				paytype: "", //支付类型
				IS_WEIXIN: false,
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onShow() {
			this.$store.dispatch("updateUserInfo");
			this.$nextTick(()=>{
				this.$refs.showModal.init(false);
				this.closeSetpwdPop();
			})
		},
		watch: {
			userinfo(val) {
				this.payprice = val.membership_fee
			}
		},
		onLoad() {
			// 只在微信小程序内获取改数据
			//#ifdef MP-WEIXIN	
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.statusBarHeight = menuButtonInfo.height;
			this.statusBarTop = menuButtonInfo.top;

			this.IS_WEIXIN = true;
			//#endif
		},

		methods: {
			// 返回上一页
			goBack() {
				copyFunc.goBack();
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			openCoup() {
				this.$refs.paychoose.open('bottom');
			},
			closeDiscountPop() {
				this.$refs.paychoose.close();
			},
			isPassword(data) {
				this.password = data;
				this.doPay();
			},
			async doPay() {
				uni.showLoading({
					title: '加载中..'
				})
				let channel = this.IS_WEIXIN ? 1 : 2;
				// 支付类型 1- 红包支付 2- 余额支付 3- 微信支付
				
				try {
					const res = await vips('openMembership', {
						type: this.paytype,
						pay_password: this.password,
						pay_channel: channel
					});
					if (res.code == 200) {
						if(this.userinfo.user_level_id == '0'){
							this.$Toast.none('会员开通成功～');
						}
						else{
							this.$Toast.none('续费成功～');
						}
						this.$refs.showModal.init(false);
						this.$store.dispatch("updateUserInfo");
					}
				} catch (error) {
					uni.hideLoading();
					this.$refs.showModal.init(false);
					this.$Toast.none(error.msg);
				}
			},
			// pay_channel: 2.h5;1.小程序
			async doWechatPay() {
				uni.showLoading({
					title: '加载中..'
				})
				let channel = this.IS_WEIXIN ? 1 : 2;

				let domain = window.location.origin;
				let back_url = `${domain}/#/pagesA/my/vips/myvip`; //支付成功回调地址
				
				const res = await vips('openMembership', {
					type: this.paytype,
					pay_channel: channel,
					return_url: back_url
				});
				if (res.code == 200) {
					uni.hideLoading();
					if (this.IS_WEIXIN) {
						uni.navigateTo({
							url: `/pages/pay/pay-webview?payUrl=${encodeURIComponent(res.data.pay_url)}`
						})
					} else {
						location.href = res.data.pay_url;
					}
				}
			},
			showPwd() {
				this.$refs.showModal.init(true);
				this.closeDiscountPop();
			},

			// 开通会员
			goOpen(data) {
				this.paytype = data;
				// 判断是否设置了支付密码
				if (this.userinfo.pay_password) {
					if (this.paytype == 1) { //红包支付
						if (+this.userinfo.user_red < +this.payprice) {
							this.$Toast.none("红包不足，请选择其他支付方式～");
							return;
						} else {
							this.showPwd();
						}
					} else if (this.paytype == 2) { //余额支付
						if (+this.userinfo.user_account < +this.payprice) {
							this.$Toast.none("余额不足，请选择其他支付方式～");
							return;
						} else {
							this.showPwd();
						}
					} else {
						this.doWechatPay();
					}
				} else {
					this.closeDiscountPop();
					this.$refs.setpwdPop.open('center');
				}
			},
			// 关闭设置支付密码弹框
			closeSetpwdPop() {
				this.$refs.setpwdPop.close();
			},
			// 设置支付密码
			goSetPwd() {
				uni.navigateTo({
					url: '/pagesA/my/userinfo/editPwd'
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.vips {
		box-sizing: border-box;
		height: 522rpx;
		background: linear-gradient(135deg, #FCF3E4 0%, #F4D6A7 100%);
	}

	.navs {
		width: 58%;
		@include flexLayout(center, space-between);
	}

	//#ifdef H5
	.navs {
		padding-top: 44rpx !important;
	}

	//#endif

	.content {
		position: relative;
		top: 90rpx;
		padding: 0 3% 60rpx;

		.titles {
			@include flexLayout(center, space-between);
			font-size: 32rpx;
			font-weight: 500;
			margin: 50rpx 0 26rpx;
			color: #070707;

			.vip_rule {
				@include flexLayout(center, flex-start);
				color: #795B26;
				font-size: 24rpx;
			}
		}

		.open_btn {
			width: 94%;
			height: 88rpx;
			line-height: 88rpx;
			margin: 50rpx 3%;
			background: linear-gradient(90deg, #F2D2A0 0%, #DCB269 100%);
			border-radius: 44rpx;
			color: #070707;
			font-size: 32rpx;
			font-weight: 500;
		}

		.open_btn:after {
			border-color: transparent;
		}

		.goopen {
			@include cards;
			@include flexLayout(center, space-between);
			width: 100%;
			height: 174rpx;
			margin: 0;
			@include bck_img($img-link+'/my/open_vip_bg.png');
			border-radius: 16rpx;
			color: #A78148;
			font-size: 32rpx;
			font-weight: 500;

			&_left {
				@include flexLayout(center, flex-start);
			}

			.gold {
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: #dfcba7;
				text-align: center;
				border-radius: 50%;
				margin-right: 14rpx;

				.vip_icon {
					width: 32rpx;
				}
			}

			.dredge_btn {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: rgba(167, 129, 72, 0.08);
				border-radius: 4rpx;
				border: 2rpx solid #A78148;
				color: #A78148;
				font-size: 28rpx;
				padding: 0;
				margin: 0;
			}

			.dredge_btn:after {
				border-color: transparent;
			}

		}
	}

	.setpwd_pop {
		width: 620rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		color: #070707;
		font-size: 32rpx;
		overflow: hidden;

		.pwd_info {
			line-height: 194rpx;
			font-size: 36rpx;
			text-align: center;
			font-weight: 500;
		}

		.pwd_btns {
			@include flexLayout(center, center);

			.opt_btn {
				width: 50%;
				height: 126rpx;
				line-height: 126rpx;
				background-color: #FFFFFF;
				font-size: 32rpx;
				border-radius: 0;

			}

			.opt_btn::after {
				border-color: transparent;
			}

			.set_btn {
				background: #F54642;
				color: #FFFFFF;
			}

			.cancle_btn {
				border-top: 2rpx solid #DDDDDD;
			}
		}
	}
</style>
